import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Modal, Select, Tooltip, Input, Checkbox } from 'antd';
import { uniqueArray } from '@/utils/utils';
import HOCSelect from '@/components/AntDesign/Select';

const CheckboxGroup = Checkbox.Group;
const { TextArea } = Input;
const FormItem = Form.Item;
const { Option } = Select;

@connect(({ publicdata: { alertObjList, probTypeList } }) => ({
  alertObjList,
  probTypeList,
}))
@Form.create()
class SingProModal extends PureComponent {
  state = {};

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchProType',
      payload: {},
    });
    dispatch({
      type: 'publicdata/fetchAlertList',
      payload: ['ALRT_OBJ'],
    });
  }

  static getDerivedStateFromProps(nextProps) {
    const nameList = uniqueArray(nextProps.nameList, 'empName');
    const tempArr = [];
    const tempArr2 = [];
    let nameContent = '';
    let nameTitle = '';
    nameList.forEach(value => {
      tempArr.push(value.empName);
      tempArr2.push(value.empName);
    });
    nameTitle = tempArr2.join('、');
    if (tempArr.length >= 3) {
      nameContent = `${tempArr.filter((item, index) => index <= 2).join('、')}等${
        tempArr.length
      }人`;
    } else {
      nameContent = tempArr.join('、');
    }

    const { form } = nextProps;
    if (!nextProps.visible) {
      form.resetFields();
    }

    return {
      nameContent,
      nameTitle,
    };
  }

  handleContent = paramList => {
    const nameList = uniqueArray(paramList, 'empName');
    const tempArr = [];
    const tempArr2 = [];
    let nameContent = '';
    let nameTitle = '';
    nameList.forEach(value => {
      tempArr.push(value.empName);
      tempArr2.push(value.empName);
    });
    nameTitle = tempArr2.join('、');
    if (tempArr.length >= 3) {
      nameContent = `${tempArr.filter((item, index) => index <= 2).join('、')}等${
        tempArr.length
      }人`;
    } else {
      nameContent = tempArr.join('、');
    }
    this.setState({
      nameContent,
      nameTitle,
    });
  };

  handleOk = () => {
    const { form, onOk } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onOk(values);
      }
    });
  };

  handleCancle = () => {
    const { onCancel = () => {} } = this.props;
    onCancel();
  };

  probTypeChange = val => {
    const { probTypeList, form } = this.props;
    const result = probTypeList.filter(item => item.probTypeId === val)[0];
    form.setFieldsValue({
      probTypeDesc: result && result.probTypeName,
    });
  };

  render() {
    const { nameTitle, nameContent } = this.state;
    const {
      form: { getFieldDecorator },
      visible,
      isObj,
      probTypeList,
      alertObjList,
      confirmLoading,
    } = this.props;
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 16 } },
    };
    return (
      <div>
        <Modal
          title="标记问题人员"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancle}
          confirmLoading={confirmLoading}
        >
          <div>
            <Row>
              <Col>
                <FormItem {...formItemLayout} label="姓名">
                  <Col>
                    <Tooltip placement="top" title={<div>{nameTitle}</div>}>
                      {nameContent}
                    </Tooltip>
                  </Col>
                </FormItem>
              </Col>
            </Row>
            {isObj === false ? null : (
              <Row>
                <Col>
                  <FormItem {...formItemLayout} label="提醒对象">
                    {getFieldDecorator('alrtObjs', {
                      rules: [{ required: true, message: '请选择提醒对象' }],
                    })(<CheckboxGroup options={alertObjList} />)}
                  </FormItem>
                </Col>
              </Row>
            )}
            <Row>
              <Col>
                <FormItem {...formItemLayout} label="问题人员类型">
                  {getFieldDecorator('probTypeId', {
                    rules: [{ required: true, message: '请选择问题类型' }],
                  })(
                    <HOCSelect
                      style={{ width: '100%' }}
                      onChange={this.probTypeChange}
                      showSearch
                      allowClear
                      filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                      optionFilterProp="children"
                    >
                      {probTypeList.map(value => (
                        <Option value={value.probTypeId} key={value.probTypeId}>
                          {value.probTypeName}
                        </Option>
                      ))}
                    </HOCSelect>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col>
                <FormItem {...formItemLayout} label="问题说明">
                  {getFieldDecorator('probTypeDesc', {
                    rules: [{ required: true, message: '请填写问题说明' }],
                  })(
                    <TextArea
                      placeholder="请输入问题说明"
                      autosize={{ minRows: 3, maxRows: 6 }}
                      maxLength="100"
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
          </div>
        </Modal>
      </div>
    );
  }
}

export default SingProModal;
